<template>
  <div><el-button  type="primary" size="small">新增</el-button></div>
  <el-table :data="tableData" border style="height:450px">
    <el-table-column prop="goodsInfoId" label="序号" />
    <el-table-column prop="goodsName" label="商品名称" />
    <el-table-column prop="production" label="生产批次" />
    <el-table-column prop="guarantee" label="保质期(天)" />
    <el-table-column prop="licenseNumber" label="生产许可证号" />
    <el-table-column prop="enterprise" label="生产企业" />
    <el-table-column prop="wans" label="信息完善度"/>
    <el-table-column label="操作" width="230">
      <template #default>
        <el-button link type="primary" size="small" @click="showDetail">详情</el-button>
        <el-button link type="primary" size="small">修改</el-button>
        <el-button link type="primary" size="small">导出溯源码</el-button>
        <el-button link type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
    <el-pagination
      v-model:current-page="page.pageIndex"
      v-model:page-size="page.pageSize"
      :page-sizes="[2, 3, 5,10]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive,ref,onMounted,watch } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const route = useRouter()

const tableData = ref([])

const page =reactive({
  pageIndex:1,
  pageSize:10,
  totalCount:1,
  pageCount:1
})

watch(page,()=>{
  show()
})

const show=()=>{
  axios.get('http://localhost:5144/api/Massage/GetGoodsInfo',{
    params:{
      pageIndex:page.pageIndex,
      pageSize:page.pageSize
    }
  })
  .then((res)=>{
    tableData.value=res.data.data.data
    page.pageCount=res.data.data.pageCount
    page.totalCount=res.data.data.totalCount
  })
}

const showDetail=()=>{
  route.push('/ShopInfoList')
}

onMounted(()=>{
  show()
})
</script>
